<template>
  <Dialog title="查看已授权账号" v-model="dialogVisible" width="1200">
    <el-table v-loading="loading" :data="filterTableData" :stripe="true" :show-overflow-tooltip="true" border row-key="id" default-expand-all height="500">
      <el-table-column label="账号id" prop="advertiserId" />
      <el-table-column label="账号名称" prop="advertiserName" />
      <el-table-column label="添加时间" prop="createTime" :formatter="dateFormatter" />
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="查找账号名称" />
        </template>
      </el-table-column>
    </el-table>
  </Dialog>
</template>
<script setup lang="ts">
import * as AccountApi from '@/api/ad/account'
import { dateFormatter } from '@/utils/formatTime'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const listLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const advertiserList = ref([])

/** 打开弹窗 */
const open = async (id?: number) => {
  dialogVisible.value = true
  listLoading.value = true
  try {
    const data = await AccountApi.getAdvertiserTreeList({
      accountId: id
    })
    advertiserList.value = data
    // advertiserList.value = [
    //   {
    //     "id": 1,
    //     "accountId": 6,
    //     "advertiserId": "11223344",
    //     "advertiserName": "测试",
    //     "parentId": 0,
    //     "children": [
    //       {
    //         "createTime": null,
    //         "updateTime": null,
    //         "creator": null,
    //         "updater": null,
    //         "deleted": false,
    //         "id": 12,
    //         "accountId": 6,
    //         "advertiserId": "11223344222",
    //         "advertiserName": "测试22",
    //         "parentId": 1,
    //         "advertiserRole": null
    //       },
    //       {
    //         "createTime": null,
    //         "updateTime": null,
    //         "creator": null,
    //         "updater": null,
    //         "deleted": false,
    //         "id": 13,
    //         "accountId": 6,
    //         "advertiserId": "11223344222",
    //         "advertiserName": "嘿嘿",
    //         "parentId": 1,
    //         "advertiserRole": null
    //       },
    //       {
    //       "createTime": null,
    //         "updateTime": null,
    //         "creator": null,
    //         "updater": null,
    //         "deleted": false,
    //         "id": 14,
    //         "accountId": 6,
    //         "advertiserId": "11223344222",
    //         "advertiserName": "yaya",
    //         "parentId": 1,
    //         "advertiserRole": null
    //       }
    //     ]
    //   },
    //   {
    //     "id": 2,
    //     "accountId": 6,
    //     "advertiserId": "11223344",
    //     "advertiserName": "裴裴",
    //     "parentId": 0,
    //     "children": [
    //       {
    //         "createTime": null,
    //         "updateTime": null,
    //         "creator": null,
    //         "updater": null,
    //         "deleted": false,
    //         "id": 22,
    //         "accountId": 6,
    //         "advertiserId": "11223344222",
    //         "advertiserName": "亚亚",
    //         "parentId": 2,
    //         "advertiserRole": null
    //       },
    //       {
    //         "createTime": null,
    //         "updateTime": null,
    //         "creator": null,
    //         "updater": null,
    //         "deleted": false,
    //         "id": 23,
    //         "accountId": 6,
    //         "advertiserId": "11223344222",
    //         "advertiserName": "鹏鹏",
    //         "parentId": 2,
    //         "advertiserRole": null
    //       },
    //       {
    //       "createTime": null,
    //         "updateTime": null,
    //         "creator": null,
    //         "updater": null,
    //         "deleted": false,
    //         "id": 24,
    //         "accountId": 6,
    //         "advertiserId": "11223344222",
    //         "advertiserName": "喜欢",
    //         "parentId": 2,
    //         "advertiserRole": null
    //       },
    //       {
    //         "createTime": null,
    //         "updateTime": null,
    //         "creator": null,
    //         "updater": null,
    //         "deleted": false,
    //         "id": 23,
    //         "accountId": 6,
    //         "advertiserId": "11223344222",
    //         "advertiserName": "嘿嘿",
    //         "parentId": 2,
    //         "advertiserRole": null
    //       }
    //     ]
    //   },
    //   {
    //     "id": 3,
    //     "accountId": 6,
    //     "advertiserId": "11223344",
    //     "advertiserName": "汪汪",
    //     "parentId": 0,
    //     "children": []
    //   },
    //   {
    //     "id": 4,
    //     "accountId": 6,
    //     "advertiserId": "11223344",
    //     "advertiserName": "雪饼",
    //     "parentId": 0,
    //     "children": [
    //       {
    //         "createTime": null,
    //         "updateTime": null,
    //         "creator": null,
    //         "updater": null,
    //         "deleted": false,
    //         "id": 41,
    //         "accountId": 6,
    //         "advertiserId": "11223344222",
    //         "advertiserName": "雪饼",
    //         "parentId": 4,
    //         "advertiserRole": null
    //       },
    //       {
    //         "createTime": null,
    //         "updateTime": null,
    //         "creator": null,
    //         "updater": null,
    //         "deleted": false,
    //         "id": 42,
    //         "accountId": 6,
    //         "advertiserId": "11223344222",
    //         "advertiserName": "汪汪雪饼",
    //         "parentId": 4,
    //         "advertiserRole": null
    //       }
    //     ]
    //   },
    // ]
  } finally {
    listLoading.value = false
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const search = ref('')
const filterTableData = computed(() => {
  if(!search.value) {
    return advertiserList.value
  }else {
    return test(advertiserList.value, search.value)
  }
})
const test = (arr, value)=>{
  // 一级查找，有符合的元素
  //   查找子级
  //       子级有    返回一级和符合的子级
  //       子级没有  返回一级
  // 一级查找，没有符合的元素
  //   查找子级
  //       子级有     返回一级 以及 符合的子级
  //       子级没有   返回空
  const res = []
  for(let i = 0; i < arr.length; i++) {
    if(arr[i].advertiserName.includes(value)){  // true 父级有
      if(arr[i].children.length > 0) {  // 子级有数据
        let childrenArr = []
        childrenArr = arr[i].children.filter(cd=>{
          return cd.advertiserName.includes(search.value)
        })
        if(childrenArr.length > 0) {  // 子级是否有  // > 0 子级有
          res.push({
            ...arr[i],
            children: childrenArr
          })
        }else { // 子级没有
          res.push({
            ...arr[i],
            children: []
          })
        }
      }else {
        res.push({
          ...arr[i],
          children: []
        })
      }
    }
    else {  // 父级没有
      if(arr[i].children.length > 0) { // 子级有数据
        let childrenArr = []
        childrenArr = arr[i].children.filter(cd=>{
          return cd.advertiserName.includes(search.value)
        })
        if(childrenArr.length > 0) { //子级有
          res.push({
            ...arr[i],
            children: childrenArr
          })
        }
      }
    }
  }
  return res
}

</script>
